<template>
  <div class="container">
    <div class="tipView">
      <span>收款人信息</span>
    </div>
    <base-input-view title="收款人" place-holder="收款人姓名" errmsg="请输入正确的收款人姓名" input-type="hz" margintop="0" tag="1" @textCallBack="_textCallBack"/>
    <base-input-view :isSpace="true" title="卡号" place-holder="收款人储蓄卡号" errmsg="请输入正确的收款人储蓄卡号" input-type="bankcardNum" margintop="0" tag="2"
                     right-title="支持银行" @rightBtnCallBack="_rightBtnCallBack" @textCallBack="_textCallBack"/>
    <div class="tipView">
      <span>付款人信息</span>
    </div>
    <base-input-view :isSpace="true" title="授权码" place-holder="16位字母数字组合码" errmsg="请输入16位数字字母组合的授权码" input-type="codePwd" margintop="0" tag="3"
                     @textCallBack="_textCallBack"/>
    <div class="tipView-bottom">
      <span>付款人信息</span>
    </div>
    <base-input-view title="手机号" place-holder="请输入您的手机号" errmsg="请输入正确手机号" input-type="phone" margintop="0.06" tag="4"
                     @textCallBack="_textCallBack" @textErrCallBack="_textErrCallBack"/>
    <base-input-view title="验证码" place-holder="请输入手机验证码" errmsg="请6位数字验证码" input-type="sms" margintop="0" tag="5"
                     @textCallBack="_textCallBack">
      <sms-btn @smsSend="_smsSend" title="获取验证码" :currentPhoneNum="payInfo.payOutPhoneNo"/>
    </base-input-view>

    <bottom-btn class="bottomBtn" title="确认转账" :disabled="btnDisable"/>

  </div>
</template>

<script>
import baseInputView from '../../components/inputView/baseInputView'
import bottomBtn from '../../components/bottomBtn'
import smsBtn from '@/components/smsBtn'

export default {
  name: 'transComponent',
  components: {bottomBtn, baseInputView, smsBtn},
  data () {
    return {
      payInfo: {
        payInName: '', //收款人姓名
        payInCardNumber: '', //收款人卡号
        payOutPwd: '', //付款人授权码
        payOutPhoneNo: '', //付款人手机号
        payOutSmsCode: '', //付款人短信验证码
      },
      btnDisable: true, //按钮是否失去点击能力
    }
  },
  watch: {
    /*监听输入项数据*/
    payInfo: {
      handler (newV, oldV) {
        let countArr = []
        Object.keys(newV).forEach(key => {
          let item = newV[key]
          if (item.length > 0) {
            countArr.push(item)
          }
        })
        if (newV.payOutPhoneNo.length === 11) {
        } else {
          this.isSmsReady = false
        }

        if (countArr.length >= 5) {
          this.btnDisable = false
        } else {
          this.btnDisable = true
        }

      },
      deep: true,
      immediate: true,
    },
  },

  methods: {

    /*输入框右侧按钮点击事件*/
    _rightBtnCallBack (tag) {
      // 支持银行
      if (tag === '2') {
        this.$router.push({
          name: 'transDetail',
          params: {
            title: '我从转账页面来',
            titleDetail: 'saoNanYiGe',
          },
        })
      }
    },
    /*输入文字回调*/
    _textCallBack (text, tag) {
      if (tag === '1') {
        this.payInfo.payInName = text
      }
      if (tag === '2') {
        this.payInfo.payInCardNumber = text
      }
      if (tag === '3') {
        this.payInfo.payOutPwd = text
      }
      if (tag === '4') {
        this.payInfo.payOutPhoneNo = text
      }
      if (tag === '5') {
        this.payInfo.payOutSmsCode = text
      }
    },
    /*文本错误回调*/
    _textErrCallBack (text, tag) {
      if (tag === '4') {
        this.payInfo.payOutPhoneNo = text
      }
    },

    /*短信发送按钮*/
    async _smsSend () {
      try {
        this.$api.showIdc()
        await this.$api.sendSmsVerificationCode({'phoneNo': this.payInfo.payOutPhoneNo})
        this.$api.hideIdc()
      } catch (e) {
        this.$api.hideIdc()
        this.$api.alertSure('', '短信发送失败')
      }
    },
    async doAction () {
      try {
        this.$api.showIdc()
        let res = await this.$api.queryCardInfo({'cardSerialNumber': '6688010300000001', 'verificationCode': '558863'})
        // let res = await this.$api.sendSmsVerificationCode({'phoneNo': '15151474388'})
        this.$api.hideIdc()

      } catch (e) {
        this.$api.hideIdc()
        console.log(e.msg)
        console.log('=====')
      }
    },

    /*查询金额*/
    async getQuota () {
      try {
        this.$api.showIdc()
        let res = await this.$api.getTransferQuota({})
        this.$api.hideIdc()
      }
      catch (e) {
        this.$api.hideIdc()
        this.$api.alertSure('提示', e.msg, () => {
        })
      }

    },
  },



  /**************************************** 生命周期 ****************************************/

  mounted () {
    this.getQuota()
  },

}
</script>

<style scoped lang="less">
  .container {
    width: 3.75rem;
    .tipView {
      margin-top: 0.13rem;
      height: 0.44rem;
      line-height: 0.44rem;
      margin-left: 0.14rem;
      font-size: 0.14rem;
    }
    .tipView-bottom {
      height: 0.32rem;
      line-height: 0.32rem;
      margin-left: 0.14rem;
      font-size: 0.14rem;
      color: #999999;
    }
    .bottomBtn {
      margin: 0 auto;
      margin-top: 0.14rem;
    }
  }

</style>
